<template>
  <div class="front shopNews">
    <div class="banner"
      :style="{backgroundImage:`url(${shopInfo.shopBackendImage?shopInfo.shopBackendImage:require('@/assets/front-img/shop/banner.png')})`}">
    </div>
    <div class="docWidth warpper">
      <div class="bigTitle">公司动态</div>
      <div class="swiper-container news">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="(item,index) in shopNews" :key="index" @click="toDetail(item.id)">
            <div class="name lineTextHidden"><span style="margin-right:20px">{{index+1}}</span>{{item.name}}</div>
            <div class="time">{{item.createTime | formatDate}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import { mapGetters, mapState } from 'vuex'
import { shopItemListByQo } from "@/api/front-home";
export default {
  name: 'FrontShopNews',
  filters: {
    formatDate(value) {
      if (!value) return ''
      return value.toString().split(' ')[0]
    }
  },
  data() {
    return {
      shopNews: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({
      shopId: state => state.front.shopId,
      shopInfo: state => state.front.shopInfo,
    })
  },
  watch: {
    shopNews(val) {
      this.runSwiper()
    }
  },
  created() {
    const shopId = this.$route.query && this.$route.query.id && Number(this.$route.query.id)
    if (this.$store.state.front.shopId !== shopId) {
      this.$store.commit("front/SET_SHOPID", shopId)
      this.$store.dispatch('front/getShopInfo', shopId)
    }
    this.shopItemListByQo(shopId)
  },
  methods: {
    shopItemListByQo(id) {
      shopItemListByQo({ id: id, type: 1 }).then((res) => {
        const data = res || []
        this.shopNews = data
      });
    },
    runSwiper() {
      const that = this;
      this.$nextTick(() => {
        var mySwiper = new Swiper('.swiper-container', {
          direction: 'vertical',
          autoplay: 1500,
          // loop: true,
          spaceBetween: 0,
          centeredSlides: false,
          touchRatio: 0.2,
          slideToClickedSlide: true,
          grabCursor: true,
          slidesPerView: 4,
          onSlideChangeEnd: function (swiper) {
            // that.active = swiper.activeIndex
          }
        });
      });
    },
    toDetail(newsId) {
      this.$router.push({ path: '/front-shop/shopNewsDetail', query: { id: this.shopId, newsId: newsId } });
    },
  },
};
</script>
<style lang="scss" scoped>
.shopNews {
  .banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 328px;
  }
  .bigTitle {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 38px;
    padding: 0 25px;
    background: #965f29;
  }
  .warpper {
    margin: 30px auto 0;
    .news {
      overflow: hidden;
      height: 180px;
      margin: 20px 150px;
      li {
        line-height: 45px;
        font-size: 18px;
        font-weight: 400;
        color: #000;
        display: flex;
        cursor: pointer;
        .name {
          flex: 1;
          margin-right: 10px;
        }
        .time {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
}
</style>